<template>
  <div>
    <!--    搜索框-->
    <el-card class="box-card">
      <el-form :inline="true" :model="keyword" ref="searchForm" class="box-child">
        <el-form-item label="单位名称" prop="labourUnit">
          <el-input size="small" v-model="keyword.labourUnit" clearable placeholder="请输入单位名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="principal">
          <el-input size="small" v-model="keyword.principal" clearable placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input size="small" v-model="keyword.phone"  clearable placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" size="small" icon="el-icon-search" >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="warning" @click="resetsearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
        <el-form-item class="delete">
          <el-button type="primary" size="small" @click="openAdd" plain icon="el-icon-plus">添加</el-button>
          <el-button type="danger" size="small" @click="delBatch" icon="el-icon-delete-solid">删除</el-button>
          <el-button type="success" size="small" @click="fetchData" icon="el-icon-refresh-right">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-card>

<!--    弹出对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="33%"   append-to-body>
      <el-form :model="laoWuUser"  label-width="80px" :rules="laoWuUserRules" ref="LaoWuUserRulesForm">
        <el-form-item label="劳务单位" prop="labourUnit">
          <el-input v-model="laoWuUser.labourUnit" autocomplete="off" style="width: 330px " ></el-input>
        </el-form-item>
        <el-form-item label="负责人"  prop="principal">
          <el-input v-model="laoWuUser.principal" autocomplete="off" style="width: 330px "></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="laoWuUser.phone" autocomplete="off" style="width: 330px "></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addLaoWuUser('LaoWuUserRulesForm')">确 定</el-button>
      </div>
    </el-dialog>

<!--    中间部分 表格-->
    <el-table v-loading="loading" :data="measureList" @selection-change="handleSelectionChange" >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" />
      <el-table-column label="劳务公司名字" align="center" prop="labourUnit" />
      <el-table-column label="负责人" align="center" prop="principal" />
      <el-table-column label="手机号" align="center" prop="phone" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['md:measure:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['md:measure:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    下方分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4, 5, 10, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<script>
import {lwfindAll,delBatch,addLaoWuUser} from "@/api/laowu";

export default {
  name:'Laowu',
  data(){
    return{
      currentPage: 1,
      total:0,
      loading:false,
      //单位表格内数据
      measureList:[],
      pageNum:1,
      pageSize:5,
      keyword:{
        labourUnit:null,
        principal:null,
        phone:null
      },
      ids:[],
      title:'',
      dialogFormVisible:false,
      laoWuUser:{
        labourUnit:null,
        principal:null,
        phone:null
      },
      laoWuUserRules:{
        labourUnit:[
          { required: true, message: '单位名称不能为空', trigger: 'blur' },
        ],
        principal:[
          { required: true, message: '负责人不能为空', trigger: 'blur' },
        ],
        phone:[
          { required: true, message: '手机号不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  methods:{
    fetchData(){//获取数据
      let params ={
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        labourUnit:this.keyword.labourUnit,
        principal:this.keyword.principal,
        phone:this.keyword.phone
      }
      lwfindAll(params).then(res =>{
        this.loading = false
        this.measureList=res.data.list
        this.total = res.data.total//给分页的总条数赋值
      })
    },
    // 分页控制
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchData()
    },
    //点击开始搜索
    search(){
      this.fetchData()
    },
    // 重置
    resetsearchForm(formName) {
      this.$refs[formName].resetFields();
      this.fetchData()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = [];
      // console.log(selection) 每次勾选 都会查到当前行的所有数据
      for (let i = 0; i < selection.length; i++) {
        this.ids.push(selection[i].id)
      }
    },
    //删除 批量
    delBatch(){
      this.$confirm('确认要删除选中的数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning' // 弹框 询问是否确定删除
      }).then(() => { //  点击确定
        let params = {  // 拼一个参数 内容是点击 的单位的id
          ids:this.ids.join(",")
        }
        console.log("ids"+this.ids)
        delBatch(params).then(res => {  // 删完回调
          this.$message({   // 弹框提示删除成功
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()  //删完再次查询全部 的数据
        })
      }).catch(() => {    // 点击取消 弹出取消删除
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //点击添加 打开输入框
    openAdd(){
      this.title = "请输入新增劳务单位"
      this.dialogFormVisible = true
    },
//点击添加
    addLaoWuUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //执行添加
          addLaoWuUser(this.laoWuUser).then(res =>{
            this.$message({   // 弹框提示添加成功
              type: 'success',
              message: '添加成功!'
            });
            this.fetchData();
            this.$refs[formName].resetFields();
          })
          // alert('submit!');
          console.log(this.laoWuUser)
        } else {
          console.log('error submit!!');
          return false;
        }
        this.dialogFormVisible = false
      })
    },
    //点击取消 重置表单
    cancel(formName){
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
  },
  // 生命周期
  created() {
    this.fetchData()
  }
}
</script>

<style>
.delete{
  float: right;
}

</style>
